Switch 开关
介绍
使用开关切换两种状态之间。
用法
基本引入
import { FQSwitch } from '@fq/fq-weapp-ui';
组件依赖的样式文件(仅按需引用时需要)
import '@fq/fq-weapp-ui/dist/styles/components/switch.scss';
基础用法
<FQSwitch />
不可用
<FQSwitch disabled />
文字和图标
<FQSwitch checkedChildren='开启' unCheckedChildren='关闭' />
<FQSwitch checkedChildren='1' unCheckedChildren='0' />
大小
<FQSwitch size='large' />
<FQSwitch />
<FQSwitch size='small' />
API
属性
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| checked | 指定当前是否选中 | boolean | false | |
| checkedChildren | 选中时的内容 | ReactNode | - | |
| defaultChecked | 初始是否选中 | boolean | false | |
| defaultValue | defaultChecked 的别名 | boolean | - | |
| disabled | 是否禁用 | boolean | false | |
| size | 开关大小,可选值 large, default, small | string | default | |
| unCheckedChildren | 非选中时的内容 | ReactNode | - | |
| value | checked 的别名 | boolean | - | |
| onChange | 变化时回调函数 | function(checked: boolean, event: ITouchEvent) | - | |
| onClick | 点击时的回调函数 | function(checked: boolean, event: ITouchEvent) | - |